<template>
    <div id="compliance-overview">
        <!-- 表格工具栏 -->
        <div class="table-toolbar">
            <el-row>
                <el-col :span="6">
                    <div class="form-item">展示层级：</div>
                    <el-select v-model="searchParams.showLevel" clearable size="mini" @change="getTableData">
                        <el-option value="1" label="第一层"></el-option>
                        <el-option value="2" label="第一层,第二层"></el-option>
                        <el-option value="3" label="第一层,第二层,第三层"></el-option>
                        <el-option value="4" label="第一层,第二层,第三层,第四层"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" style="padding-left: 5px">
                    <el-checkbox v-model="searchParams.entryFilter" @change="getTableData">条目去重 </el-checkbox>
                    <el-tooltip effect="dark" content="同一条目同时对应不同来源类型下的条款时, 优先级:法律法规＞产品合同＞公司制度" placement="right">
                        <i class="yh-question"></i>
                    </el-tooltip>
                </el-col>
                <el-col :span="6" :offset="6" style="text-align: right">
                    <el-popover
                        v-model="showPopover"
                        popper-class="todo-popper"
                        placement="bottom"
                        width="900"
                        :visible-arrow="false"
                        transition="el-collapse-transition"
                        trigger="click"
                    >
                        <p style="margin: 5px 0">预设置条目待办：</p>
                        <table>
                            <tr>
                                <th style="width: 100px">待办编号</th>
                                <th style="width: 100px">合规卡编号</th>
                                <th style="width: 430px">待办内容</th>
                                <th style="width: 100px">发起人</th>
                                <th style="width: 160px; text-align: center">发起时间</th>
                            </tr>
                            <tr v-for="i in todoList" :key="i._待办编号">
                                <td>{{ i._待办编号 }}</td>
                                <td>{{ i._合规卡编号 }}</td>
                                <td>{{ i._待办内容 }}</td>
                                <td>{{ i._发起人 }}</td>
                                <td>{{ dateFormat(i._发起日期) + ' ' + timeFormat(i._发起时间) }}</td>
                            </tr>
                        </table>
                        <span slot="reference" class="todo-box">
                            待办提醒 ({{ todoLength }}条)
                            <i :class="showPopover ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
                        </span>
                    </el-popover>
                </el-col>
            </el-row>
        </div>
        <!--  -->
        <RiskTableP
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="columns"
            v-loading="tableLoading"
            :searchParams="searchParams"
            minWidth="110"
            :tree-config="{}"
            style="height: calc(100% - 60px)"
            @page-change="getTableData"
        >
            <template #sourceName="{ row }">
                <span v-if="row.level == 1 || row.level == 2" class="level-style">
                    <i class="el-icon-office-building"></i> {{ row.sourceName }}
                </span>
                <span v-else-if="row.level == 3" class="level-style"> <i class="el-icon-collection"></i> {{ row.sourceName }} </span>
                <span v-else>{{ row.sourceName }}</span>
            </template>
        </RiskTableP>
    </div>
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { ColumnVO, TableConfigVO } from '@/common/vo';
import { dateFormat, timeFormat } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import API from '../api/index';

@Component({ name: 'ComplianceOverview', components: { RiskTableP } })
export default class ComplianceOverview extends Vue {
    dateFormat = dateFormat;
    timeFormat = timeFormat;

    tableLoading: boolean = false;
    tableData: any[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'sourceCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    columns: ColumnVO[] = [
        {
            field: 'sourceName',
            title: '来源',
            minWidth: '130px',
            filterType: 'search',
            filters: [{ data: '' }],
            'tree-node': true,
        },
        {
            field: 'termNum',
            title: '控制条款数',
            minWidth: '130px',
            align: 'right',
        },
        {
            field: 'O32EntryNum',
            title: 'O32控制条目数',
            minWidth: '130px',
            align: 'right',
        },
        {
            field: 'O32TermCoverageRate',
            title: 'O32实现条款覆盖率',
            minWidth: '130px',
            align: 'right',
            render: value => (value ? value + '%' : value),
        },
        {
            field: 'YhEntryNum',
            title: 'YH控制条目数',
            minWidth: '130px',
            align: 'right',
        },
        {
            field: 'YhDynamicEntryNum',
            title: 'YH实时控制条目数',
            minWidth: '130px',
            align: 'right',
        },
        {
            field: 'YhStaticEntryNum',
            title: 'YH静态控制条目数',
            minWidth: '130px',
            align: 'right',
        },
        {
            field: 'YhTermCoverageRate',
            title: 'YH实现条款覆盖率',
            minWidth: '130px',
            align: 'right',
        },
    ];
    tableKey: number = 0;

    searchParams: any = {
        showLevel: '4', // 展示层级
        entryFilter: true, // 条目去重
        sourceName: '',
    };

    showPopover: boolean = false;
    todoList: any[] = [];
    todoLength: number = 0;
    timer: any;

    mounted() {
        this.getTableData();
        this.getTodoMsg();
        this.timer = setInterval(() => this.getTodoMsg(), 120000); // 2分钟
    }

    beforeDestroy() {
        if (this.timer) {
            this.timer && clearInterval(this.timer);
            this.timer = null;
        }
    }

    getTableData(): void {
        this.tableLoading = true;

        /**
         * 重新请求时是否需要保存当前展开keys
         * getRowExpandRecords()
         */

        API.getComplianceOverview({ ...this.searchParams })
            .then((res: any) => {
                this.tableData = res || [];
            })
            .finally(() => {
                this.tableLoading = false;
                this.tableData = [
                    { id: 1000, sourceName: 'test abc1', level: 1, O32EntryNum: 200, termNum: 1024, O32TermCoverageRate: 90 },
                    {
                        id: 1005,
                        sourceName: 'Test2',
                        level: 1,
                        O32EntryNum: 200,
                        termNum: 0,
                        O32TermCoverageRate: '90',
                        children: [
                            { id: 24300, sourceName: 'Test3', level: 2, O32EntryNum: 1000, termNum: 1024, O32TermCoverageRate: 90 },
                            {
                                id: 20045,
                                sourceName: 'test abc4',
                                level: 2,
                                O32EntryNum: 200,
                                termNum: 600,
                                O32TermCoverageRate: '90',
                                children: [
                                    { id: 24330, sourceName: 'test abc5', level: 3, O32EntryNum: 1200, termNum: 25, O32TermCoverageRate: 90 },
                                    { id: 21011, sourceName: 'Test6', level: 3, O32EntryNum: 1000, termNum: 512, O32TermCoverageRate: 90 },
                                    {
                                        id: 22200,
                                        sourceName: 'Test7',
                                        level: 3,
                                        O32EntryNum: 400,
                                        termNum: 1024,
                                        O32TermCoverageRate: 90,
                                        children: [
                                            { id: 22210, sourceName: 'Test77', level: 4, O32EntryNum: 400, termNum: 1024, O32TermCoverageRate: 90 },
                                        ],
                                    },
                                ],
                            },
                            {
                                id: 10053,
                                sourceName: 'test abc96',
                                level: 2,
                                O32EntryNum: 200,
                                termNum: 0,
                                O32TermCoverageRate: '90',
                                children: [
                                    { id: 243230, sourceName: 'test abc5', level: 3, O32EntryNum: 1200, termNum: 25, O32TermCoverageRate: 90 },
                                    { id: 210211, sourceName: 'Test6', level: 3, O32EntryNum: 1000, termNum: 512, O32TermCoverageRate: 90 },
                                    { id: 222200, sourceName: 'Test7', level: 3, O32EntryNum: 400, termNum: 1024, O32TermCoverageRate: 90 },
                                    { id: 1243230, sourceName: 'test abc5', level: 3, O32EntryNum: 1200, termNum: 25, O32TermCoverageRate: 90 },
                                    { id: 1210211, sourceName: 'Test6', level: 3, O32EntryNum: 1000, termNum: 512, O32TermCoverageRate: 90 },
                                    { id: 12222200, sourceName: 'Test7', level: 3, O32EntryNum: 400, termNum: 1024, O32TermCoverageRate: 90 },
                                    { id: 12432302, sourceName: 'test abc5', level: 3, O32EntryNum: 1200, termNum: 25, O32TermCoverageRate: 90 },
                                    { id: 12102113, sourceName: 'Test6', level: 3, O32EntryNum: 1000, termNum: 512, O32TermCoverageRate: 90 },
                                    { id: 12122203, sourceName: 'Test7', level: 3, O32EntryNum: 400, termNum: 1024, O32TermCoverageRate: 90 },
                                    { id: 1243234, sourceName: 'test abc5', level: 3, O32EntryNum: 1200, termNum: 25, O32TermCoverageRate: 90 },
                                    { id: 1210215, sourceName: 'Test6', level: 3, O32EntryNum: 1000, termNum: 512, O32TermCoverageRate: 90 },
                                    { id: 2222223, sourceName: 'Test7', level: 3, O32EntryNum: 400, termNum: 1024, O32TermCoverageRate: 90 },
                                ],
                            },
                        ],
                    },
                    { id: 23666, sourceName: 'Test8', level: 1, O32EntryNum: 200, termNum: 2048, O32TermCoverageRate: 10 },
                    { id: 24555, sourceName: 'test abc9', level: 1, O32EntryNum: 1000, termNum: 224, O32TermCoverageRate: 10 },
                ];
            });
    }

    /**
     * 获取待办提醒信息
     */
    getTodoMsg(): void {
        API.getTodoList()
            .then((res: any) => {
                this.todoList = res || [];
                this.todoLength = res.length;
            })
            .finally(() => {
                this.todoList = [
                    {
                        _待办编号: 'DB001',
                        _合规卡编号: 'YH001',
                        _待办内容: '“本计划的总资产不得超过20%。”，待走OA流程',
                        _发起人: '张三',
                        _发起日期: '20230912',
                        _发起时间: '120010',
                    },
                    {
                        _待办编号: 'DB001',
                        _合规卡编号: 'YH001',
                        _待办内容: '“所有年金正回购不超过净值的20%。”，待恒生配置条目',
                        _发起人: '张三',
                        _发起日期: '20230912',
                        _发起时间: '120010',
                    },
                ];
            });
    }

    /**
     * 展示层级 变动事件
     * @val
     */
    handleChangeShowLevel(val): void {}

    toggleExpandChangeEvent(params: any) {
        //   const $table = tableRef.value
        //   if ($table) {
        //     const { row, expanded } = params
        //     console.log('节点展开事件', expanded, '获取父节点：', $table.getParentRow(row))
        //   }
    }

    filterChangeEvent({ column }) {
        console.log(column, 'column');
        let { filters } = column;
        let filterValue = filters[0].data ?? '';
        // this.tableData = this.filterByValue(JSON.parse(JSON.stringify(this.tableDataAll)), filterValue);
        // Start
        // let data = this.tableDataAll.filter(item => item.sourceName.includes(filterValue));
        // this.tableData = XEUtils.toArrayTree(data, { key: 'id', parentKey: 'parentId' });
        // End
    }

    filterByValue(data, value) {
        return data.filter(item => {
            item.children && (item.children = this.filterByValue(item.children, value));
            if (item.sourceName.includes(value) || item.children?.length) {
                return true;
            } else {
                return false;
            }
        });
    }
    // 前端过滤字段来源
    filterNameMethod({ option, row }) {
        console.log(row, row.sourceName, 'row.sourceName');
        return row.sourceName.includes(option.data);
    }
}
</script>
<style lang="scss" scoped>
#compliance-overview {
    height: 100%;
    min-width: 1250px;
    padding: 0 10px;

    .form-item {
        width: 80px;
        display: inline-block;
        text-align: right;
    }

    .el-col {
        height: 28px;
        line-height: 28px;
        /deep/ .el-select {
            width: calc(100% - 90px);
        }
    }

    .todo-box {
        display: inline-block;
        width: 200px;
        text-align: left;
        padding: 0 5px 0 10px;
        border-radius: 5px;
        border: 1px solid #dd2722;
        font-weight: bold;
        color: #dd2722;
        cursor: pointer;

        .el-icon-arrow-up,
        .el-icon-arrow-down {
            float: right;
            line-height: 28px;
            font-weight: bold;
            padding-right: 5px;
        }
    }

    .level-style {
        font-weight: 600;
        i {
            color: #2589f5;
            font-weight: 600;
        }
    }
}

.yh-question {
    font-weight: bold;
    padding: 0 5px;
}

.todo-popper {
    background: red;
}
</style>
<style>
.todo-popper {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-width: 0px;
    padding: 5px 10px;
    color: #fff;
    height: 90%;
    overflow: auto;
}

.todo-popper table tr {
    height: 28px;
}

.todo-popper table td {
    padding: 0 5px;
}
</style>
